TypeScript Nomlar Makonini Birlashtirish: Kengaytirilgan Modul E'lon qilish Namunalar

TypeScript kodingizni tuzish va tartibga solish uchun kuchli xususiyatlarni taklif etadi. Shunday xususiyatlardan biri nomlar makonini birlashtirish bo'lib, u sizga bir xil nomdagi bir nechta nomlar makonini aniqlashga imkon beradi va TypeScript ularning e'lonlarini avtomatik ravishda bitta nomlar makoniga birlashtiradi. Bu imkoniyat mavjud kutubxonalarni kengaytirish, modulli ilovalar yaratish va murakkab tur ta'riflarini boshqarish uchun ayniqsa foydalidir. Ushbu qo'llanma nomlar makonini birlashtirishdan foydalanishning ilg'or naqshlarini chuqur o'rganib, sizga toza va qo'llab-quvvatlanishi oson TypeScript kodini yozish imkoniyatini beradi.

Nomlar Makonlari va Modullarni Tushunish

Nomlar makonini birlashtirishga kirishishdan oldin, TypeScript'dagi nomlar makonlari va modullarning asosiy tushunchalarini anglash juda muhim. Ikkalasi ham kodni tashkil qilish mexanizmlarini ta'minlasa-da, ular o'z doirasi va qo'llanilishi bo'yicha sezilarli darajada farq qiladi.

Nomlar Makonlari (Ichki Modullar)

Nomlar makonlari bu bog'liq kodlarni bir guruhga jamlash uchun TypeScript'ga xos bo'lgan konstruksiyadir. Ular aslida sizning funksiyalaringiz, sinflaringiz, interfeyslaringiz va o'zgaruvchilaringiz uchun nomlangan konteynerlar yaratadi. Nomlar makonlari asosan bitta TypeScript loyihasi ichidagi ichki kodni tashkil qilish uchun ishlatiladi. Biroq, ES modullarining rivojlanishi bilan, nomlar makonlari odatda yangi loyihalar uchun kamroq afzal ko'riladi, faqatgina eski kod bazalari bilan moslik yoki maxsus global kengaytirish stsenariylari zarur bo'lmasa.

Misol:


namespace Geometry {
  export interface Shape {
    getArea(): number;
  }

  export class Circle implements Shape {
    constructor(public radius: number) {}

    getArea(): number {
      return Math.PI * this.radius * this.radius;
    }
  }
}

const myCircle = new Geometry.Circle(5);
console.log(myCircle.getArea()); // Natija: 78.53981633974483

Modullar (Tashqi Modullar)

Modullar esa, ES modullari (ECMAScript modullari) va CommonJS tomonidan belgilangan kodni tashkil qilishning standartlashtirilgan usulidir. Modullar o'zlarining doirasiga ega va qiymatlarni aniq import va eksport qiladilar, bu ularni qayta ishlatiladigan komponentlar va kutubxonalar yaratish uchun ideal qiladi. ES modullari zamonaviy JavaScript va TypeScript dasturlashda standart hisoblanadi.

Misol:


// circle.ts
export interface Shape {
  getArea(): number;
}

export class Circle implements Shape {
  constructor(public radius: number) {}

  getArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}

// app.ts
import { Circle } from './circle';

const myCircle = new Circle(5);
console.log(myCircle.getArea());

Nomlar Makonini Birlashtirishning Kuchi

Nomlar makonini birlashtirish sizga bir xil nomlar makoni nomi bilan bir nechta kod bloklarini aniqlash imkonini beradi. TypeScript bu e'lonlarni kompilyatsiya vaqtida aqlli ravishda bitta nomlar makoniga birlashtiradi. Bu imkoniyat quyidagilar uchun bebahodir:

Mavjud Kutubxonalarni Kengaytirish: Mavjud kutubxonalarga ularning manba kodini o'zgartirmasdan yangi funksionallik qo'shish.
Kodni Modullarga Ajratish: Katta nomlar makonlarini kichikroq, boshqarilishi osonroq fayllarga bo'lish.
Ambient E'lonlar: TypeScript e'lonlariga ega bo'lmagan JavaScript kutubxonalari uchun tur ta'riflarini aniqlash.

Nomlar Makonini Birlashtirish Yordamida Kengaytirilgan Modul E'lon qilish Namunalar

Keling, TypeScript loyihalaringizda nomlar makonini birlashtirishdan foydalanishning ba'zi ilg'or naqshlarini ko'rib chiqamiz.

1. Mavjud Kutubxonalarni Ambient E'lonlar bilan Kengaytirish

Nomlar makonini birlashtirishning eng keng tarqalgan qo'llanilishlaridan biri bu mavjud JavaScript kutubxonalarini TypeScript tur ta'riflari bilan kengaytirishdir. Tasavvur qiling, siz `my-library` deb nomlangan JavaScript kutubxonasidan foydalanmoqdasiz va uning rasmiy TypeScript qo'llab-quvvatlashi yo'q. Siz ushbu kutubxona uchun turlarni aniqlash uchun ambient e'lon faylini (masalan, `my-library.d.ts`) yaratishingiz mumkin.

Misol:


// my-library.d.ts
declare namespace MyLibrary {
  interface Options {
    apiKey: string;
    timeout?: number;
  }

  function initialize(options: Options): void;
  function fetchData(endpoint: string): Promise;
}

Endi siz `MyLibrary` nomlar makonini o'z TypeScript kodingizda tur xavfsizligi bilan ishlatishingiz mumkin:


// app.ts
MyLibrary.initialize({
  apiKey: 'YOUR_API_KEY',
  timeout: 5000,
});

MyLibrary.fetchData('/api/data')
  .then(data => {
    console.log(data);
  });

Agar keyinchalik `MyLibrary` tur ta'riflariga ko'proq funksionallik qo'shish kerak bo'lsa, siz shunchaki yana bir `my-library.d.ts` faylini yaratishingiz yoki mavjud faylga qo'shishingiz mumkin:


// my-library.d.ts

declare namespace MyLibrary {
  interface Options {
    apiKey: string;
    timeout?: number;
  }

  function initialize(options: Options): void;
  function fetchData(endpoint: string): Promise;

  // MyLibrary nomlar makoniga yangi funksiya qo'shish
  function processData(data: any): any;
}

TypeScript bu e'lonlarni avtomatik ravishda birlashtiradi, bu sizga yangi `processData` funksiyasidan foydalanish imkonini beradi.

2. Global Obyektlarni Kengaytirish

Ba'zida siz `String`, `Number` yoki `Array` kabi mavjud global obyektlarga xususiyatlar yoki metodlar qo'shishni xohlashingiz mumkin. Nomlar makonini birlashtirish buni xavfsiz va tur tekshiruvi bilan amalga oshirishga imkon beradi.

Misol:


// string.extensions.d.ts
declare global {
  interface String {
    reverse(): string;
  }
}

String.prototype.reverse = function() {
  return this.split('').reverse().join('');
};

console.log('hello'.reverse()); // Natija: olleh

Bu misolda biz `String` prototipiga `reverse` metodini qo'shmoqdamiz. `declare global` sintaksisi TypeScript'ga global obyektni o'zgartirayotganimizni bildiradi. Shuni ta'kidlash kerakki, bu mumkin bo'lsa-da, global obyektlarni kengaytirish ba'zan boshqa kutubxonalar yoki kelajakdagi JavaScript standartlari bilan ziddiyatlarga olib kelishi mumkin. Bu usuldan oqilona foydalaning.

Xalqarolashtirish Masalalari: Global obyektlarni kengaytirganda, ayniqsa satrlar yoki raqamlarni boshqaradigan metodlar bilan, xalqarolashtirishni yodda tuting. Yuqoridagi `reverse` funksiyasi oddiy ASCII satrlari uchun ishlaydi, lekin murakkab belgilar to'plamiga ega yoki o'ngdan chapga yoziladigan tillar uchun mos kelmasligi mumkin. Lokalga moslashtirilgan satrlarni boshqarish uchun `Intl` kabi kutubxonalardan foydalanishni o'ylab ko'ring.

3. Katta Nomlar Makonlarini Modullarga Ajratish

Katta va murakkab nomlar makonlari bilan ishlaganda, ularni kichikroq, boshqarilishi osonroq fayllarga ajratish foydalidir. Nomlar makonini birlashtirish bunga erishishni osonlashtiradi.

Misol:


// geometry.ts
namespace Geometry {
  export interface Shape {
    getArea(): number;
  }
}

// circle.ts
namespace Geometry {
  export class Circle implements Shape {
    constructor(public radius: number) {}

    getArea(): number {
      return Math.PI * this.radius * this.radius;
    }
  }
}

// rectangle.ts
namespace Geometry {
  export class Rectangle implements Shape {
    constructor(public width: number, public height: number) {}

    getArea(): number {
      return this.width * this.height;
    }
  }
}

// app.ts
/// 
/// 
/// 

const myCircle = new Geometry.Circle(5);
const myRectangle = new Geometry.Rectangle(10, 5);

console.log(myCircle.getArea()); // Natija: 78.53981633974483
console.log(myRectangle.getArea()); // Natija: 50

Bu misolda biz `Geometry` nomlar makonini uchta faylga bo'ldik: `geometry.ts`, `circle.ts` va `rectangle.ts`. Har bir fayl `Geometry` nomlar makoniga o'z hissasini qo'shadi va TypeScript ularni birlashtiradi. `/// ` direktivalaridan foydalanilganiga e'tibor bering. Bular ishlasa-da, ular eski yondashuv bo'lib, zamonaviy TypeScript loyihalarida, hatto nomlar makonlaridan foydalanilganda ham, ES modullaridan foydalanish afzalroqdir.

Zamonaviy Modul Yondashuvi (Afzalroq):


// geometry.ts
export namespace Geometry {
  export interface Shape {
    getArea(): number;
  }
}

// circle.ts
import { Geometry } from './geometry';

export namespace Geometry {
  export class Circle implements Shape {
    constructor(public radius: number) {}

    getArea(): number {
      return Math.PI * this.radius * this.radius;
    }
  }
}

// rectangle.ts
import { Geometry } from './geometry';

export namespace Geometry {
  export class Rectangle implements Shape {
    constructor(public width: number, public height: number) {}

    getArea(): number {
      return this.width * this.height;
    }
  }
}

// app.ts
import { Geometry } from './geometry';
const myCircle = new Geometry.Circle(5);
const myRectangle = new Geometry.Rectangle(10, 5);

console.log(myCircle.getArea());
console.log(myRectangle.getArea());

Bu yondashuv ES modullarini nomlar makonlari bilan birga ishlatadi, bu esa zamonaviy JavaScript vositalari bilan yaxshiroq modullilik va moslikni ta'minlaydi.

4. Interfeysni Kengaytirish bilan Nomlar Makonini Birlashtirishdan Foydalanish

Nomlar makonini birlashtirish ko'pincha mavjud turlarning imkoniyatlarini kengaytirish uchun interfeysni kengaytirish bilan birga qo'llaniladi. Bu sizga boshqa kutubxonalar yoki modullarda aniqlangan interfeyslarga yangi xususiyatlar yoki metodlar qo'shish imkonini beradi.

Misol:


// user.ts
interface User {
  id: number;
  name: string;
}

// user.extensions.ts
namespace User {
  export interface User {
    email: string;
  }
}

// app.ts
import { User } from './user'; // user.ts fayli User interfeysini eksport qiladi deb faraz qilamiz
import './user.extensions'; // Qo'shimcha ta'sir uchun import: User interfeysini kengaytirish

const myUser: User = {
  id: 123,
  name: 'John Doe',
  email: 'john.doe@example.com',
};

console.log(myUser.name);
console.log(myUser.email);

Bu misolda biz `User` interfeysiga `email` xususiyatini nomlar makonini birlashtirish va interfeysni kengaytirish yordamida qo'shmoqdamiz. `user.extensions.ts` fayli `User` interfeysini kengaytiradi. `app.ts` da `./user.extensions` importiga e'tibor bering. Bu import faqat `User` interfeysini kengaytirishning qo'shimcha ta'siri uchun amalga oshiriladi. Bu import bo'lmasa, kengaytirish kuchga kirmaydi.

Nomlar Makonini Birlashtirish uchun Eng Yaxshi Amaliyotlar

Nomlar makonini birlashtirish kuchli xususiyat bo'lsa-da, potentsial muammolarni oldini olish uchun undan oqilona foydalanish va eng yaxshi amaliyotlarga rioya qilish muhim:

Ortiqcha Foydalanishdan Saqlaning: Nomlar makonini birlashtirishdan ortiqcha foydalanmang. Ko'p hollarda, ES modullari toza va qo'llab-quvvatlanishi osonroq yechimni taqdim etadi.
Aniq Bo'ling: Nomlar makonini birlashtirishdan qachon va nima uchun foydalanayotganingizni aniq hujjatlashtiring, ayniqsa global obyektlarni kengaytirganda yoki tashqi kutubxonalarni kengaytirganda.
Izchillikni Saqlang: Bir xil nomlar makonidagi barcha e'lonlarning izchil ekanligiga va aniq kodlash uslubiga rioya qilishiga ishonch hosil qiling.
Alternativalarni Ko'rib Chiqing: Nomlar makonini birlashtirishdan oldin, meros olish, kompozitsiya yoki modulni kengaytirish kabi boshqa usullar yanada mosroq bo'lishi mumkinligini ko'rib chiqing.
Puxta Sinovdan O'tkazing: Nomlar makonini birlashtirishdan keyin, ayniqsa mavjud turlar yoki kutubxonalarni o'zgartirganda, kodingizni har doim puxta sinovdan o'tkazing.
Iloji Boricha Zamonaviy Modul Yondashuvidan Foydalaning: Yaxshiroq modullilik va vositalarni qo'llab-quvvatlash uchun `/// ` direktivalaridan ko'ra ES modullaridan foydalanishni afzal ko'ring.

Global Masalalar

Global auditoriya uchun ilovalar ishlab chiqayotganda, nomlar makonini birlashtirishdan foydalanganda quyidagi masalalarni yodda tuting:

Lokalizatsiya: Agar siz global obyektlarni satrlar yoki raqamlar bilan ishlaydigan metodlar bilan kengaytirayotgan bo'lsangiz, lokalizatsiyani hisobga oling va lokalga mos formatlash va manipulyatsiya uchun `Intl` kabi tegishli API'lardan foydalaning.
Belgilar Kodirovkasi: Satrlar bilan ishlaganda, turli xil belgilar kodirovkalaridan xabardor bo'ling va kodingiz ularni to'g'ri ishlashiga ishonch hosil qiling.
Madaniy An'analar: Sanalar, raqamlar va valyutalarni formatlashda madaniy an'analarni yodda tuting.
Vaqt Mintaqalari: Sanalar va vaqtlar bilan ishlaganda, chalkashliklar va xatoliklarni oldini olish uchun vaqt mintaqalarini to'g'ri boshqarishga ishonch hosil qiling. Mustahkam vaqt mintaqasini qo'llab-quvvatlash uchun Moment.js yoki date-fns kabi kutubxonalardan foydalaning.
Foydalanish Imkoniyati (Accessibility): Kodingizning nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga, WCAG kabi foydalanish imkoniyati bo'yicha ko'rsatmalarga rioya qilinganligiga ishonch hosil qiling.

`Intl` (Xalqarolashtirish API) yordamida lokalizatsiya qilish namunasi:


// number.extensions.d.ts
declare global {
  interface Number {
    toCurrencyString(locale: string, currency: string): string;
  }
}

Number.prototype.toCurrencyString = function(locale: string, currency: string) {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency,
  }).format(this);
};

const price = 1234.56;

console.log(price.toCurrencyString('en-US', 'USD')); // Natija: $1,234.56
console.log(price.toCurrencyString('de-DE', 'EUR')); // Natija: 1.234,56 €
console.log(price.toCurrencyString('ja-JP', 'JPY')); // Natija: ￥1,235

Bu misol `Number` prototipiga `Intl.NumberFormat` API yordamida `toCurrencyString` metodini qanday qo'shishni ko'rsatadi, bu esa sizga raqamlarni turli xil lokallar va valyutalarga muvofiq formatlash imkonini beradi.

Xulosa

TypeScript nomlar makonini birlashtirish kutubxonalarni kengaytirish, kodni modullarga ajratish va murakkab tur ta'riflarini boshqarish uchun kuchli vositadir. Ushbu qo'llanmada keltirilgan ilg'or naqshlar va eng yaxshi amaliyotlarni tushunib, siz nomlar makonini birlashtirishdan foydalanib, toza, qo'llab-quvvatlanishi oson va kengaytiriladigan TypeScript kodini yozishingiz mumkin. Biroq, shuni unutmangki, ES modullari ko'pincha yangi loyihalar uchun afzalroq yondashuvdir va nomlar makonini birlashtirish strategik va oqilona ishlatilishi kerak. Ilovalaringiz dunyo bo'ylab foydalanuvchilar uchun qulay va foydalanishga yaroqli bo'lishini ta'minlash uchun har doim kodingizning global oqibatlarini, xususan, lokalizatsiya, belgilar kodirovkasi va madaniy an'analar bilan bog'liq masalalarni hisobga oling.